<template>
    <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
      <div class="small-panel-box">
        <el-row :gutter="20">
          <el-col :sm="12" :lg="4" >
            <div class="small-panel user-reg suspension" @click="QueryManufacturer(null)">
              <div class="small-panel-title">全部</div>
              <div class="small-panel-content">
                <div class="content-left">
                  <Icon color="red" size="20" name="fa fa-cny" />
                  <span id="user_reg_number">{{Data.AllMoney}}</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :sm="12" :lg="4" v-for="(item, index) in Data.ManufacturerInfo">
            <div class="small-panel user-reg suspension" @click="QueryManufacturer(item.id)">
              <div class="small-panel-title">{{item.Name}}</div>
              <div class="small-panel-content">
                <div class="content-left">
                  <Icon color="red" size="20" name="fa fa-cny" />
                  <span id="user_reg_number">{{item.Money}}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <TableHeader
            :buttons="['refresh','comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('Quick search placeholder', { fields: t('parts.entrydetail.quick Search Fields') })"
        ></TableHeader>

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        <Table ref="tableRef"></Table>

        <!-- 表单 -->
        <PopupForm />
    </div>
</template>

<script setup lang="ts">
import {onMounted, provide, reactive, ref} from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import { baTableApi } from '/@/api/common'
import { defaultOptButtons } from '/@/components/table'
import TableHeader from '/@/components/table/header/index.vue'
import Table from '/@/components/table/index.vue'
import baTableClass from '/@/utils/baTable'
import createAxios from "/@/utils/axios";
import {forEach} from "lodash-es";

defineOptions({
    name: 'parts/entry',
})

const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])

/*
*
*/
const Data = reactive({
  ManufacturerInfo:[

  ],
  manufacturer_id:null,
  AllMoney:0
})
/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/parts.Entry/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false },
            { label: t('parts.entrydetail.parts_info_id'), prop: 'parts_info_id', align: 'center', operatorPlaceholder: t('Fuzzy query'), operator: 'LIKE' },
            { label: t('parts.entrydetail.partsinfo__parts_name'), prop: 'partsInfo.parts_name', align: 'center', operatorPlaceholder: t('Fuzzy query'), render: 'tags', operator: 'LIKE' },
            { label: t('parts.entrydetail.partsinfo__parts_code'), prop: 'partsInfo.parts_code', align: 'center', operatorPlaceholder: t('Fuzzy query'), render: 'tags', operator: 'LIKE' },
            { label: t('parts.entrydetail.partsinfo__manufacturer_info_id'), prop: 'manufacturerInfo.manufacturer_name', align: 'center', operatorPlaceholder: t('Fuzzy query'), render: 'tags', operator: 'LIKE' },
            { label: t('parts.entrydetail.parts_cost'), prop: 'parts_cost', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('parts.entrydetail.parts_money'), prop: 'parts_money', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('parts.entrydetail.entry_nur'), prop: 'entry_nur', align: 'center', operator: 'RANGE', sortable: false },
            { label: t('parts.entrydetail.entry_date'), prop: 'entry_date', align: 'center', operator: 'RANGE', sortable: 'custom' },
            { label: t('parts.entrydetail.remark'), prop: 'remark', align: 'center', operator: false },
        ],
        dblClickNotEditColumn: [undefined],
    },
    {
        defaultItems: { parts_cost: 0, parts_money: 0, entry_nur: 0, entry_date: null },
    }
)

provide('baTable', baTable)
//获取对账单信息
const StatementOfAccount = function (){
    createAxios(
        {
          url: "/admin/parts.Entry/GetInfo",
          method: 'GET',
          params: {
            id:Data.manufacturer_id
          },
        },
        {
          showSuccessMessage: true,
        }
    ).then((res:any)=>{
      if (res.code == 1){
        baTable.getIndex()
        Data.ManufacturerInfo = res.data.list;
        res.data.list.forEach((item)=>{
          Data.AllMoney += Number(item.Money)

        })
      }
    })
}
// 厂家点击事件查询某一个厂家
const QueryManufacturer = function (id){
  createAxios(
      {
        url: "/admin/parts.Entry/GetInfo",
        method: 'GET',
        params: {
          id:id
        },
      },
      {
        showSuccessMessage: true,
      }
  ).then((res:any)=>{
    if (res.code == 1){
      baTable.table.filter.search = [
        {
          field:"manufacturerInfo.id",
          operator:"eq",
          render:undefined,
          val:id
        }
      ]
      baTable.getIndex()
      // Data.ManufacturerInfo = res.data.list;

    }
  })
}
onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
        StatementOfAccount()
    })

})
</script>

<style scoped lang="scss">
.welcome {
  background: #e1eaf9;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 15px 20px !important;
  box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
  .welcome-img {
    height: 100px;
    margin-right: 10px;
    user-select: none;
  }
  .welcome-title {
    font-size: 1.5rem;
    line-height: 30px;
    color: var(--ba-color-primary-light);
  }
  .welcome-note {
    padding-top: 6px;
    font-size: 15px;
    color: var(--el-text-color-primary);
  }
}
.working {
  height: 130px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  height: 100%;
  position: relative;
  &:hover {
    .working-coffee {
      -webkit-transform: translateY(-4px) scale(1.02);
      -moz-transform: translateY(-4px) scale(1.02);
      -ms-transform: translateY(-4px) scale(1.02);
      -o-transform: translateY(-4px) scale(1.02);
      transform: translateY(-4px) scale(1.02);
      z-index: 999;
    }
  }
  .working-coffee {
    transition: all 0.3s ease;
    width: 80px;
  }
  .working-text {
    display: block;
    width: 100%;
    font-size: 15px;
    text-align: center;
    color: var(--el-text-color-primary);
  }
  .working-opt {
    position: absolute;
    top: -40px;
    right: 10px;
    background-color: rgba($color: #000000, $alpha: 0.3);
    padding: 10px 20px;
    border-radius: 20px;
    color: var(--ba-bg-color-overlay);
    transition: all 0.3s ease;
    cursor: pointer;
    opacity: 0;
    z-index: 999;
    &:active {
      background-color: rgba($color: #000000, $alpha: 0.6);
    }
  }
  &:hover {
    .working-opt {
      opacity: 1;
      top: 0;
    }
    .working-done {
      opacity: 1;
      top: 50px;
    }
  }
}
.small-panel-box {
  margin-top: 20px;
}
.small-panel {
  background-color: #e9edf2;
  border-radius: var(--el-border-radius-base);
  padding: 20px;
  margin-bottom: 20px;
  .small-panel-title {
    color: #92969a;
    font-size: 15px;
  }
  .small-panel-content {
    display: flex;
    align-items: flex-end;
    margin-top: 10px;
    color: #2c3f5d;
    .content-left {
      font-size: 24px;
      .icon {
        margin-right: 10px;
      }
      span {
        display: inline-block;
        font-size: 28px;
      }
    }
    .content-right {
      font-size: 18px;
      margin-left: auto;
    }
    .color-success {
      color: var(--el-color-success);
    }
    .color-warning {
      color: var(--el-color-warning);
    }
    .color-danger {
      color: var(--el-color-danger);
    }
    .color-info {
      color: var(--el-text-color-secondary);
    }
  }
}
.growth-chart {
  margin-bottom: 20px;
}
.user-growth-chart,
.file-growth-chart {
  height: 260px;
}
.new-user-growth {
  height: 300px;
}

.user-source-chart,
.user-surname-chart {
  height: 400px;
}
.new-user-item {
  display: flex;
  align-items: center;
  padding: 20px;
  margin: 10px 15px;
  box-shadow: 0 0 30px 0 rgba(82, 63, 105, 0.05);
  background-color: var(--ba-bg-color-overlay);
  .new-user-avatar {
    height: 48px;
    width: 48px;
    border-radius: 50%;
  }
  .new-user-base {
    margin-left: 10px;
    color: #2c3f5d;
    .new-user-name {
      font-size: 15px;
    }
    .new-user-time {
      font-size: 13px;
    }
  }
  .new-user-arrow {
    margin-left: auto;
  }
}
.new-user-card :deep(.el-card__body) {
  padding: 0;
}

@media screen and (max-width: 425px) {
  .welcome-img {
    display: none;
  }
}
@media screen and (max-width: 1200px) {
  .lg-mb-20 {
    margin-bottom: 20px;
  }
}
html.dark {
  .welcome {
    background-color: var(--ba-bg-color-overlay);
  }
  .small-panel {
    background-color: var(--ba-bg-color-overlay);
    .small-panel-content {
      color: var(--el-text-color-regular);
    }
  }
  .new-user-item {
    .new-user-base {
      color: var(--el-text-color-regular);
    }
  }
}
</style>
